<template>
  <div>
    <!-- 
      template标签配合v-slot:name来定向分发
     -->
    <MyDialog>
      <!-- 头部  -->
      <template v-slot:header>
        <div>我是大标题</div>
      </template>
      <!-- 中间  -->
      <template v-slot:content>
        <div>我是中间内容</div>
      </template>
      <!-- 尾部  -->
      <template #footer>
        <button>取消</button>
      </template>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from "./components/MyDialog.vue";
export default {
  data() {
    return {};
  },
  components: {
    MyDialog,
  },
};
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>